<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { TypePageDTO } from '@src/interfaces/TypePageDTO.ts'
import { TypeClassInfo } from '@src/interfaces/TypeClassInfo.ts'
import Template from '@src/Template.vue'
import { EnumClassStatus } from '@src/enums/EnumClassStatus.ts'
import {
  banClassApi,
  getClassListApi,
  unbanClassApi,
} from '@src/apis/classApi.ts'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import Pagination from '@src/components/Pagination.vue'

const page = ref<TypePageDTO<TypeClassInfo>>({
  current: 1,
  size: 10,
  total: 0,
  records: [],
})
const search = ref({
  name: '',
  ids: '',
})

const getClassList = () => {
  getClassListApi({
    page: page.value.current,
    pageSize: page.value.size,
    ...search.value,
  }).then(({ data }) => {
    page.value = data
  })
}

const unbanClass = (row: TypeClassInfo) => {
  unbanClassApi(<number>row.id).then(() => {
    row.status = EnumClassStatus.ENABLE
    ElMessage.success('解封成功')
  })
}

const banClass = (row: TypeClassInfo) => {
  banClassApi(<number>row.id).then(() => {
    row.status = EnumClassStatus.DISABLE
    ElMessage.success('封禁成功')
  })
}

const handleCurrentChange = (value: number) => {
  page.value.current = value
  getClassList()
}
const handleSizeChange = (value: number) => {
  page.value.size = value
  getClassList()
}

const getParamsFormSearchUrl = () => {
  const { classId } = useRoute().query as { classId: string | undefined }
  search.value.ids = classId || ''
}

onMounted(() => {
  getParamsFormSearchUrl()
  getClassList()
})

watch(search, getClassList, { deep: true })
</script>

<template>
  <div>
    <h2><el-text>班级管理</el-text></h2>
    <div class="input-box">
      <el-input v-model="search.name" placeholder="输入班级名称"></el-input>
      <el-input
        v-model.trim="search.ids"
        placeholder="输入班级ID(有多个时逗号分割)"
      ></el-input>
      <el-button type="primary">搜索</el-button>
    </div>
    <div class="table-box">
      <el-table :data="page?.records" height="720">
        <el-table-column prop="id" label="班级ID"></el-table-column>
        <el-table-column prop="name" label="班级名称"></el-table-column>
        <el-table-column prop="size" label="班级人数"></el-table-column>
        <el-table-column prop="status" label="班级状态">
          <template #default="scope">
            <div v-if="scope.row.status === EnumClassStatus.DISABLE">
              <el-text type="danger">{{ scope.row.status }}</el-text>
            </div>
            <div v-else>
              <el-text type="success">{{ scope.row.status }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <div v-show="scope.row.status === EnumClassStatus.DISABLE">
              <el-button type="success" @click="unbanClass(scope.row)"
                >解封</el-button
              >
            </div>
            <div v-show="scope.row.status === EnumClassStatus.ENABLE">
              <el-button type="danger" @click="banClass(scope.row)"
                >禁封</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination
        :page="page.current"
        :size="page.size"
        :total="page.total"
        @page-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
h2 {
  text-align: center;
  .el-text {
    font-size: 2em;
  }
}

.input-box {
  display: flex;

  & > * {
    margin: 0 10px;
  }
}
</style>
